<template>
	<view>
	

<view class="buy-list">
	<radio-group @change="getPrice"  class="r-g">	
	<view class="buy-item" v-for="item in studentList" :key="item.id" @click="radioCheck(item.id)">						
	
	<label >
	<!-- 单选框, 绑定价格的值, 如何实现点击取消选中 -->
		<view>
		<radio  :value="goods.goodsPrice"  
				:checked="item.id==radioValue"  class="size" color= "#F5C046">
		</radio>
		</view>
			
		<!-- 商品图片 -->	
		<view class="goods-pic">
			<image  class="img" :src="goods.goodsPicture"></image>
		</view>		
				
		<!-- 学生信息 -->
		<view class="studentInfo">
			<view><image class="ava" :src="item.studentAvatar"></image>
			<view class="name"><text >{{item.studentName}}的记忆</text></view>
			</view>
		</view>
		<!-- 商品描述 -->
		<view class="goods-desc">
			{{goods.goodsDesc}}
		</view>
		<!-- 商品价格 -->
		<view class="goods-price">
			¥{{goods.goodsPrice}}
		</view>
		
	</label>

				
	</view>
	</radio-group>
	</view>
		
		
		
	<!-- 价格 -->
	<view class="box">
	<view class="price">
		<view class="all-price"><text >合计:¥{{price}}</text></view>
		<view><button class="btn"  @click="topay()">立即支付</button></view>
	</view>
	</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				//商品信息
				goods:null,
				//商品id
				goodsId:null,
				
				
				//绑定的学生列表
				studentList:[],
				//单选框
				radioValue:null,
				//价格
				price:0,
				//家长id
				parentId:null,
				
				
							
				//订单信息
				bill:{
					goodsName:null,
					picNum:null,
					goodsDesc:null,
					goodsPicture:null,
					billPrice:null,
					//订单类型---产品类型
					billType:null,
					goodsId:null,
					studentId:null,
					parentId:null,
					//订单状态
					billStatus:0
				},
				

				
			}
		},
//获取商品信息, 学生列表
		onLoad: function (option) { 
			this.parentId = uni.getStorageSync("parentId")
			
			if(option.goodsInfo){
				this.goods = JSON.parse(decodeURIComponent(option.goodsInfo));
			}
			else if(option.goodsId){
				this.goodsId = option.goodsId
				this.getGoodsInfo()
			}
			this.getStudentList();
		},
		methods: {
			//改变选中状态
			radioCheck(index){
				//取消选中
				if(this.radioValue==index) {
				   this.radioValue =null
				   this.price = 0
				}else {
					  this.radioValue = index
				}    
			},
			//获取学生列表
			getStudentList(){
				uni.$api.studentFindAllByParentId(this.parentId).then(result =>{
					this.studentList = result
				})	
			},
			//获取商品信息
			getGoodsInfo(){
				uni.$api.goodsFindById(this.goodsId).then(result =>{
					this.goods = result
				})	
			},
						
			//单选框获取价格
			getPrice(item){
				// this.price = item.detail.value
				this.price = this.goods.goodsPrice
			} ,
			
			//点击支付,添加订单
			topay(){
				if(this.price ==0){
					uni.showToast({
						title: '请选择商品后再支付',
						icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
						duration: 2000    //持续时间为 2秒
					})
				}else{
					//订单信息
					this.bill={
						goodsPicture:this.goods.goodsPicture,
						goodsDesc:this.goods.goodsDesc,
						goodsName:this.goods.goodsName,
						billPrice:this.price,
						billType:this.goods.goodsType,
						goodsId:this.goods.id,
						studentId:this.radioValue,
						parentId:this.parentId,
						billStatus:0
					};
					if(this.goods.goodsType==1){//电子底片
						this.bill.picNum=this.goods.goodsNumber
					}else{//相册
						this.bill.picNum=this.goods.goodsPutnumber
					}
					
					//支付成功后 ,  添加订单信息 
					uni.$api.billAdd(this.bill).then(data=>{				
						uni.showToast({
								title: '购买成功',
								icon: 'success',    //将值设置为 success 或者 ''
								duration: 2000,//持续时间为 2秒
											
							});
							setTimeout(() => {
								//跳转支付成功
								uni.$common.navigateTo("/subpkg/baby/paySuccess/paySuccess")
							     }, 2000);
		
							uni.$emit('photoUpdate')
						}).catch(error=>{

						})	
				}
	
			}
			
		}
	}
</script>

<style>
	.r-g{
		width: 100%;
	
	}
	
	
		/* 单个商品 */
		.buy-item{
			/* width: 740rpx; */
			background-color: white;
			margin-bottom: 15rpx;
			padding: 0 30rpx 0 90rpx;
			
		}
		/* 商品描述 */
		.goods-desc{
			/* border: 1rpx solid blue; */
			font-size: 24rpx;
			letter-spacing:3rpx;
		}
		
		/* 商品价格 */
		.goods-price{
			
			/* border: 1rpx solid red; */
			color: red;
			padding: 25rpx 0;
		}
		/* 商品图片 */
		.img{
			width: 700rpx;
			height: 340rpx;
			/* object-fit: cover; */
			/* height: 100%; */
		
			border-radius: 15rpx;
			
			
		}
	/* 单选框样式 */
	.size{
		transform: scale(0.6);
		position: relative;
		top:300rpx;
		left: -70rpx;		 
		
	}
	/* 学生头像/ 姓名 */
	.studentInfo{
		/* background-color: #F5C046; */
		height: 120rpx;
		line-height: 120rpx;
		
		
	}
	/* 姓名 */
	.name{
		/* border: 1rpx solid black; */
		height: 120rpx;
		line-height: 120rpx;
		float: left;
		font-size: 32rpx;
		font-weight: 550;
		letter-spacing:3rpx;
		margin-left: 20rpx;
	}
	/* 头像 */
	.ava{

		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;	
		margin: 15rpx 0;	
		float: left;
		
	}

	
	
	/* 合计/支付 */
	.box{
		height: 120rpx;
		
	}
	.price{
		background-color: white;
		position: fixed;
		bottom: 0rpx;
		height: 120rpx;
		width: 100%;
		vertical-align: middle;
		display: block;
		
	}
	/* 合计 */
	.all-price{
		 height: 120rpx;
		 width: 40%;
		 line-height: 100rpx;
		 float: left;
		 color: red;
		 font-size: 30rpx;
		 font-weight: 600;
		 padding-left: 30rpx;
 
	}
	/* 支付 */
	.btn{
		float: right;
		height: 50rpx;
		line-height: 50rpx;
		width: 160rpx;
		font-size: 24rpx;
		margin: 30rpx 20rpx;
		border-radius: 25rpx;
		color: white;
		background-color: #F5C046;
		border: 0;
		
	}

</style>
